<template>
  <section id="contain">
    <!-- <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column label="排名" prop="rank" width="500" align="center"></el-table-column>
      <el-table-column label="节目" prop="program" min-width="40%" align="center"></el-table-column>
      <el-table-column label="得票" prop="ballot" min-width="40%" align="center"></el-table-column>
    </el-table>
    <br>
    <br>
    <br>
    <el-row>
      <el-col :span="8" :offset="8" style="text-align:center">
        <el-button type="success" @click="draw">抽取幸运观众</el-button>
      </el-col>
    </el-row>-->
    <div id="chart"></div>
  </section>
</template>
<script>
import jQuery from "jquery";
import { getRank } from "../api/nianhui.js";
import echarts from "echarts";
import "echarts-gl";
import { setInterval } from "timers";
export default {
  data() {
    return {
      tableData: [{ program: "", ballot: "", rank: "1" }],
      timer: null,
      xdata: [],
      data: []
    };
  },
  methods: {
    // tableRowClassName({ row, rowIndex }) {
    //   console.log(row);
    //   if (row.rank === "1") {
    //     return "guanjun";
    //   } else if (row.rank === "2") {
    //     return "yajun";
    //   } else if (row.rank === "3") {
    //     return "jijun";
    //   }
    //   return "";
    // },
    // draw() {
    //   this.$router.push({ path: "/draw" });
    // },
    getData() {
      getRank().then(res => {
        if (res) {
          this.tableData = res.msg;
          var maxLength = res.msg.length > 5 ? 5 : res.msg.length;
          for (let i = 0; i < maxLength; i++) {
            this.xdata.push(res.msg[i].program);
            this.data.push([0, i, res.msg[i].ballot]);
          }
          this.rank();
        } else {
          this.tableData = null;
        }
      });
    },
    rank() {
      var myChart = echarts.init(document.getElementById("chart"));
      var xData = this.xdata;
      var days = [""];
      var data = this.data;
      myChart.setOption({
        tooltip: {},
        visualMap: {
          show: false,
          max: 15,
          inRange: {
            color: [
              "#CC470C",
              "#E8E6C7",
              "#6685A5",
              "#C23531",
              "#A3C4A3",
              "#C23531"
              // "#313695",
              // "#313695",
              // "#313695",
              // "#313695",
              // "#313695"
            ]
          }
        },
        // boxDepth: ,
        animation: true,
        xAxis3D: {
          name: "",
          nameGap: 1,
          type: "category",
          data: xData,
          axisLabel: {
            show: true,
            textStyle: {
              // color: "#fff",
              fontSize: "30"
            },
            // interval: ,
            rorater: 50
          }
        },
        yAxis3D: {
          name: "",
          type: "category",
          data: days,
          axisLabel: {
            show: true,
            textStyle: {
              // color: "#fff",
              fontSize: "30"
            }
          }
        },
        zAxis3D: {
          name: "",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              // color: "#fff",
              fontSize: "30"
            }
          }
        },
        grid3D: {
          boxWidth: 200,
          boxDepth: 20,
          viewControl: {
            alpha: 0,
            beta: 0
          }
        },
        series: [
          {
            type: "bar3D",
            data: data.map(function(item) {
              console.log(item);
              return {
                value: [item[1], item[0], item[2]]
              };
            }),
            shadimg: "realistic"
          }
        ]
      });
    },
    dh() {
      var myChart = echarts.init(document.getElementById("chart"));
      var betaAngle = 0;
      var alphaAngle = 0;
      var count = 0;
      this.timer = setInterval(() => {
        count += 1;
        if (count < 12) {
          if (count % 2 === 0) {
            betaAngle += 361;
            // alphaAngle -= 360;
          } else {
            betaAngle += 361;
            // betaAngle -= 360;
            // alphaAngle += 360;
          }
          myChart.setOption({
            grid3D: {
              viewControl: {
                beta: betaAngle
                // alpha: alphaAngle
              },
              boxWidth: 0 + count * 18,
              boxDepth: 10,
              light: {
                main: {
                  intensity: 1.2
                },
                ambient: {
                  intensity: 0.3
                }
              }
            }
          });
        } else {
          clearInterval(this.timer);
        }
      }, 200);
    }
  },
  mounted() {
    // 默认显示1-5名次,可以切换
    jQuery("#chart").css("height", document.documentElement.clientHeight);
    this.getData();
    //
    // this.rank();
    // console.log(jQuery);
    // 开场自动旋转一下
    this.dh();
  }
};
</script>
<style scoped>
.el-table .guanjun {
  background: #f3d380;
}

.el-table .yajun {
  background: #c9dbec;
}

.el-table .jijun {
  background: #b98556;
}
#contain {
  display: flex;
  width: 100%;
  /* height: 80rem; */
}
#chart {
  width: 100%;
  /* height: 100%; */
  margin: 0 0;
  font-size: 1.5rem;
}
</style>